<template>
	<view class="content">
		<view class="box">
			<view class="box_1">
				<uni-icons type="search" size="30"></uni-icons>
				<input type="text" v-model="seachText" confirm-type="search" @confirm="changeSeach" placeholder="请输入乐谱名称或艺术家名称搜索" />
			</view>
			<view class="box_2" @click="changeSql">
				<image src="../../static/icon/icon1.png" mode=""></image>
			</view>
		</view>

		<view class="box1">
			<swiper class="swiper" circular :current="current" :indicator-dots="false" :autoplay="true" :interval="3000" :duration="500" @change="swiperchange">
				<swiper-item v-for="(item, index) in swiperData" :key="index">
					<view class="swiper-item">
						<image :src="item" mode="heightFix"></image>
					</view>
				</swiper-item>
			</swiper>
			<view class="dotsbox">
				<view v-for="(item, index) in swiperData" :key="index" :class="{ active: current === index }"></view>
			</view>
		</view>

		<view class="box2">
			<view class="box2_1" v-for="(item, index) in gridData" :key="index" @click="changeGrid(index, item)">
				<image :src="item.img" mode=""></image>
				<text>{{ item.title }}</text>
			</view>
		</view>

		<view class="box3">
			<text>推荐专辑</text>
			<image src="../../static/icon/icon2.png" mode=""></image>
		</view>

		<view class="box4">
			<view class="box4_1" v-for="(item, index) in songsList" :key="index" @click="changeMusicItem(item, index)">
				<view class="box4_1_l">
					<view>{{ item.name }}</view>
					<view>
						<text>作者：{{ item.author || '--' }}</text>
						<text></text>
					</view>
				</view>
				<uni-icons type="right" size="20" color="#999999"></uni-icons>
			</view>
		</view>
	</view>
</template>

<script>
import API from '@/utils/api.js';
import { aes_decrypt, aes_encrypt } from '@/utils/aes.js';
import { bluestatus, getCharacteristics, notify, bluesend } from '@/utils/blue.js';
export default {
	data() {
		return {
			seachText: '',
			swiperData: [
				require('../../static/swiper/1.jpg'),
				require('../../static/swiper/2.jpg'),
				require('../../static/swiper/3.jpg'),
				require('../../static/swiper/4.jpg'),
				require('../../static/swiper/7.png')
			],
			current: 0,
			gridData: [
				{
					id: 4,
					img: require('../../static/home/img1.png'),
					title: '京剧'
				},
				{
					id: 3,
					img: require('../../static/home/img2.png'),
					title: '豫剧'
				},
				{
					id: 12,
					img: require('../../static/home/img3.png'),
					title: '评剧'
				},
				{
					id: 2,
					img: require('../../static/home/img4.png'),
					title: '河北梆子'
				},
				{
					id: 13,
					img: require('../../static/home/img5.png'),
					title: '流行音乐'
				},
				{
					id: 14,
					img: require('../../static/home/img6.png'),
					title: '中国民乐'
				},
				{
					id: 15,
					img: require('../../static/home/img7.png'),
					title: '其他剧种'
				},
				{
					img: require('../../static/home/img8.png'),
					title: '我的乐谱'
				}
			],

			songsList: [],

			deviceStatus: false,
			deviceId: ''
		};
	},
	computed: {
		screenWidth() {
			return uni.getSystemInfoSync().screenWidth;
		},
		screenHeight() {
			return uni.getSystemInfoSync().screenHeight;
		}
	},
	onShow() {
		plus.screen.lockOrientation('portrait-primary');
		this.getSongs();
		// this.getbluestatus();
		// this.initBlue();
	},
	methods: {
		changeSql() {},

		// 搜索
		changeSeach() {
			if (!this.seachText) return;
			uni.navigateTo({
				url: '/pages/index/seachList?title=' + this.seachText,
				complete: () => {
					this.seachText = '';
				}
			});
		},

		// 轮播图切换
		swiperchange(e) {
			this.current = e.target.current;
		},

		// 查看乐谱详情
		changeMusicItem(item, index) {
			console.log(item, index, '查看歌曲');
			uni.navigateTo({
				url: `/pages/ownmusic/detail?id=${item.id}`
			});
		},

		// 乐谱查询
		getSongs() {
			API.queryTableData('WHERE user=0').then((res) => {
				console.log('查询的乐谱', res);
				this.songsList = res;
			});
		},

		// 金刚区选择
		changeGrid(index, item) {
			if (index == 7) {
				uni.navigateTo({
					url: '/pages/my/mymusicscore'
				});
			} else {
				uni.setStorageSync('id', item.id);
				uni.switchTab({
					url: '/pages/ownmusic/ownmusic'
				});
				// uni.navigateTo({
				// 	url: '/pages/index/seachList?id=' + item.id + '&title=' + item.title
				// });
			}
		},

		// 查询蓝牙连接状态
		getbluestatus() {
			bluestatus().then(
				(res) => {
					console.log(res, '查看连接的设备');
					if (res.devices.length != 0) {
						this.deviceStatus = true;
					} else {
						this.deviceStatus = false;
						uni.showToast({
							icon: 'none',
							title: '蓝牙未连接，搜索中...'
						});
						this.initBlue();
					}
				},
				(err) => {
					console.error(err, '查看连接的设备失败');
					this.deviceStatus = false;
					uni.showToast({
						icon: 'none',
						title: '蓝牙未连接，搜索中...'
					});
					this.initBlue();
				}
			);
		},

		// 【1】初始化蓝牙
		initBlue() {
			uni.openBluetoothAdapter({
				success: (res) => {
					console.log(res, '初始化蓝牙成功');
					this.discovery();
				},
				fail: (err) => {
					console.error(err, '初始化蓝牙失败');
				}
			});
		},

		// 【2】开始搜寻附近设备
		discovery() {
			uni.startBluetoothDevicesDiscovery({
				success: (res) => {
					console.log(res, '开始搜索');
					this.found();
				},
				fail: (err) => {
					console.error(err, '搜索失败');
					uni.showToast({
						icon: 'none',
						title: err.errorMessage
					});
				}
			});
		},

		// 【3】找到新设备就触发该方法
		found() {
			console.log(this.mac, '当前用户的mac信息');
			// 开启监听回调
			uni.onBluetoothDeviceFound((res) => {
				console.log(res.devices[0], '搜索的设备');
				// this.mac = uni.getStorageSync('mac');
				let data = res.devices[0];
				if (data.localName == 'SR-F300') {
					this.connect(data);
				}
			});
		},

		// 【4】连接设备
		connect(data) {
			this.deviceId = data.deviceId;
			uni.setStorageSync('deviceId', data.deviceId);
			uni.createBLEConnection({
				deviceId: this.deviceId,
				success: (res) => {
					console.log(res, '连接成功');
					this.deviceStatus = true;
					this.intervalBlue();
					// 停止搜索
					this.stopDiscovery();
					setTimeout(() => {
						this.notify();
					}, 500);
				},
				fail: (err) => {
					console.error(err, '连接失败');
					this.deviceStatus = false;
				}
			});
		},

		// 【5】停止搜索
		stopDiscovery(val) {
			uni.stopBluetoothDevicesDiscovery({
				success: (res) => {
					console.log(res, '停止搜索成功');
					if (!val) {
						this.getServices();
					}
				},
				fail: (err) => {
					console.error(err, '停止搜索失败');
				}
			});
		},

		// 【6】获取服务
		getServices() {
			uni.getBLEDeviceServices({
				deviceId: this.deviceId, // 设备ID，在上一步【4】里获取
				success: (res) => {
					console.log(res, '获取服务');
					this.getCharacteristics();
				},
				fail(err) {
					console.error(err, '获取服务失败');
				}
			});
		},

		// 【7】获取特征值
		getCharacteristics() {
			// getCharacteristics(this.deviceId)
		},

		// 【8】开启消息监听
		notify() {
			// notify(this.deviceId);
		},

		// 实时查看蓝牙监听状态
		intervalBlue() {
			uni.onBLEConnectionStateChange((res) => {
				// 该方法回调中可以用于处理连接意外断开等异常情况
				console.log(`查看监听蓝牙连接状态device ${res.deviceId} state has changed, connected: ${res.connected}`);
				let router = this.getrouter();
				if (!res.connected) {
					this.deviceStatus = false;
					this.closeblue();
				}
				if (!res.connected && router == 'pages/index/index') {
					uni.showToast({
						icon: 'none',
						title: '蓝牙未连接，搜索中...'
					});
					this.initBlue();
				}
			});
		},

		// 关闭蓝牙连接
		closeblue() {
			uni.closeBluetoothAdapter({
				success: (res) => {
					console.log('蓝牙连接已断开');
					uni.removeStorageSync('deviceId');
				},
				fail: (err) => {
					console.error('断开蓝牙连接失败', err);
					uni.removeStorageSync('deviceId');
				}
			});
		},

		// 获取当前路由
		getrouter() {
			// 获取当前路由
			const pages = getCurrentPages();
			const currentPage = pages[pages.length - 1];
			const route = currentPage.route;
			return route;
		}
	}
};
</script>

<style lang="scss" scoped>
/* 针对手机设备的样式 */
@media only screen and (max-width: 600px) {
	.content {
		padding: 0 20rpx;

		.box {
			display: flex;
			align-items: center;
			position: sticky;
			top: 0;
			z-index: 1;
			padding-top: calc(var(--status-bar-height) + 20rpx);
			margin-bottom: 14rpx;
			background-color: #fff;

			.box_1 {
				flex: 1;
				height: 84rpx;
				background: #f8f8f8;
				border-radius: 12rpx 12rpx 12rpx 12rpx;
				margin-right: 18rpx;
				display: flex;
				align-items: center;
				padding: 0 28rpx;

				input {
					flex: 1 0;
					padding: 0 20rpx;
				}
			}

			.box_2 {
				width: 84rpx;
				height: 84rpx;
				background-color: #f8f8f8;
				position: relative;
				image {
					width: 100%;
					height: 100%;
				}

				&::after {
					content: '连接';
					position: absolute;
					top: -15rpx;
					right: -15rpx;
					width: 66rpx;
					height: 34rpx;
					background: #17b76d;
					border-radius: 24rpx 24rpx 24rpx 0rpx;
					font-weight: 400;
					font-size: 24rpx;
					color: #ffffff;
					line-height: 34rpx;
					text-align: center;
				}
			}
		}

		.box1 {
			width: 100%;
			margin-bottom: 46rpx;

			.swiper {
				width: 100%;
				height: 654rpx;
				border-radius: 20rpx 20rpx 20rpx 20rpx;
				overflow: hidden;

				.swiper-item {
					width: 100%;
					height: 654rpx;
					border-radius: 20rpx 20rpx 20rpx 20rpx;
					// background-color: red;
					overflow: hidden;
					text-align: center;

					image {
						width: auto;
						height: 654rpx;
					}
				}
			}

			.dotsbox {
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				margin: 18rpx 0 0 0;

				view {
					width: 36rpx;
					height: 8rpx;
					background: #eeeeee;
					border-radius: 200rpx 200rpx 200rpx 200rpx;
					margin: 0 9rpx;
				}
				.active {
					background: #17b76d;
				}
			}
		}

		.box2 {
			width: 100%;
			// display: grid;
			// -webkit-column-gap: 74rpx;
			// column-gap: 74rpx;
			// grid-template-columns: repeat(4, 1fr);
			display: flex;
			flex-wrap: wrap;

			.box2_1 {
				width: 116rpx;
				box-sizing: border-box;
				margin: 0 calc((100vw - 504rpx) / 6);
				display: flex;
				flex-direction: column;
				align-items: center;
				margin-bottom: 30rpx;
				image {
					width: 116rpx;
					height: 116rpx;
					margin-bottom: 16rpx;
				}
				text {
					font-weight: 400;
					font-size: 28rpx;
					color: #333333;
					line-height: 40rpx;
				}
			}
			.box2_1:nth-child(1),
			.box2_1:nth-child(5) {
				margin-left: 0;
			}
			.box2_1:nth-child(8),
			.box2_1:nth-child(4) {
				margin-right: 0;
			}
		}

		.box3 {
			width: 100%;
			position: relative;
			margin-bottom: 32rpx;

			text {
				font-weight: 500;
				font-size: 36rpx;
				color: #17b76d;
				line-height: 52rpx;
				text-align: left;
			}

			image {
				width: 220rpx;
				height: 80rpx;
				position: absolute;
				left: -30rpx;
				top: -5rpx;
			}
		}

		.box4 {
			.box4_1 {
				width: 100%;
				height: 150rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-bottom: 1rpx solid #d8d8d8;

				.box4_1_l {
					flex: 1 0;
					width: 0;
					view:nth-child(1) {
						font-weight: 500;
						font-size: 36rpx;
						color: #333333;
						line-height: 52rpx;
						text-align: left;
						margin-bottom: 16rpx;
					}

					view:nth-child(2) {
						font-weight: 400;
						font-size: 28rpx;
						color: #666666;
						line-height: 40rpx;
						text-align: left;
						display: flex;
						align-items: center;
						text {
							flex: 1;
						}
					}
				}
			}
		}
	}
}

/* 针对平板设备的样式 */
@media only screen and (min-width: 601px) and (max-width: 1024px) {
	.content {
		padding: 0 20px;

		.box {
			display: flex;
			align-items: center;
			position: sticky;
			top: 0;
			z-index: 1;
			padding-top: calc(var(--status-bar-height) + 20px);
			margin-bottom: 14px;
			background-color: #fff;

			.box_1 {
				flex: 1;
				height: 84px;
				background: #f8f8f8;
				border-radius: 12px 12px 12px 12px;
				margin-right: 18px;
				display: flex;
				align-items: center;
				padding: 0 28px;

				input {
					flex: 1 0;
					padding: 0 20px;
				}
			}

			.box_2 {
				width: 84px;
				height: 84px;
				background-color: #f8f8f8;
				position: relative;
				image {
					width: 100%;
					height: 100%;
				}

				&::after {
					content: '连接';
					position: absolute;
					top: -15px;
					right: -15px;
					width: 66px;
					height: 34px;
					background: #17b76d;
					border-radius: 24px 24px 24px 0px;
					font-weight: 400;
					font-size: 24px;
					color: #ffffff;
					line-height: 34px;
					text-align: center;
				}
			}
		}

		.box1 {
			width: 100%;
			margin-bottom: 46px;

			.swiper {
				width: 100%;
				height: 654px;
				border-radius: 20px 20px 20px 20px;
				overflow: hidden;

				.swiper-item {
					width: 100%;
					height: 654px;
					border-radius: 20px 20px 20px 20px;
					// background-color: red;
					overflow: hidden;
					text-align: center;

					image {
						width: auto;
						height: 654px;
					}
				}
			}

			.dotsbox {
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				margin: 18px 0 0 0;

				view {
					width: 36px;
					height: 8px;
					background: #eeeeee;
					border-radius: 200px 200px 200px 200px;
					margin: 0 9px;
				}
				.active {
					background: #17b76d;
				}
			}
		}

		.box2 {
			width: 100%;
			// display: grid;
			// -webkit-column-gap: 74px;
			// column-gap: 74px;
			// grid-template-columns: repeat(4, 1fr);
			display: flex;
			flex-wrap: wrap;

			.box2_1 {
				width: 116px;
				box-sizing: border-box;
				margin: 0 calc((100vw - 504px) / 6);
				display: flex;
				flex-direction: column;
				align-items: center;
				margin-bottom: 30px;
				image {
					width: 116px;
					height: 116px;
					margin-bottom: 16px;
				}
				text {
					font-weight: 400;
					font-size: 28px;
					color: #333333;
					line-height: 40px;
				}
			}
			.box2_1:nth-child(1),
			.box2_1:nth-child(5) {
				margin-left: 0;
			}
			.box2_1:nth-child(8),
			.box2_1:nth-child(4) {
				margin-right: 0;
			}
		}

		.box3 {
			width: 100%;
			position: relative;
			margin-bottom: 32px;

			text {
				font-weight: 500;
				font-size: 36px;
				color: #17b76d;
				line-height: 52px;
				text-align: left;
			}

			image {
				width: 220px;
				height: 80px;
				position: absolute;
				left: -30px;
				top: -5px;
			}
		}

		.box4 {
			.box4_1 {
				width: 100%;
				height: 150px;
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-bottom: 1px solid #d8d8d8;

				.box4_1_l {
					flex: 1 0;
					width: 0;
					view:nth-child(1) {
						font-weight: 500;
						font-size: 36px;
						color: #333333;
						line-height: 52px;
						text-align: left;
						margin-bottom: 16px;
					}

					view:nth-child(2) {
						font-weight: 400;
						font-size: 28px;
						color: #666666;
						line-height: 40px;
						text-align: left;
						display: flex;
						align-items: center;
						text {
							flex: 1;
						}
					}
				}
			}
		}
	}
}
</style>